<!-- 确认弹窗 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>确认弹框</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="divcss-a">
    <button class="button1" onclick="jb('确认添加','addItem')">添加</button>
    <button class="button1" onclick="jb('确认删除','deleteItem')">删除</button>
    <button class="button1" onclick="jb('提示框？')">提示</button>

    <div class="mask"></div>
    <div class="divcss-b">
        <label>你还真的敢点啊？</label>
    </div>
</div>

</body>
<style>
    .divcss-a{
        position: relative;
        width: 375px;
        height: 677px;
        background: #66afe9;
        border: 1px solid #000;
        margin: auto;
    }
    .button1{
        background: #FF0000;
        color: white;
    }
    .mask{
        z-index: 999;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.5;
    }
    .divcss-b{
        position: absolute;
        z-index: 1000;
        width: 200px;
        height: 100px;
        background: #00FF00;
        left: 50%;
        top: 50%;
        /*margin: 0 auto;*/
        transform: translate(-50%,-50%);
        text-align: center;
        border: 1px;
        border-radius: 10px;
        box-shadow: 5px 3px 10px #62a9fb;
    }
    label{
        position: absolute;
        left: 50%;
        top: 30%;
        transform: translate(-50%);
    }
    .button2{
        position: absolute;
        width: 60px;
        height: 30px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,50%);
    }
</style>
</html>
<script type="text/javascript">
    $(document).ready(function () {
       $(".divcss-b").hide();
       $(".mask").hide();
    });
    $('.button2,.mask').click(function(){
        $('.mask,.divcss-b').hide()
    });
    var jb= function(text,fn){
        $('.button2').remove();
        $('.mask').show();
        $(".divcss-b").show().find('label').html(text);
        if(fn){
            $('label').after('<button class="button2" onclick='+fn+'()>确定</button>');
        }
        else {
            setTimeout(function () {
                $('.mask,.divcss-b').hide();
            },1000);
        }
    };
    function addItem(){
        // alert(123);
        $('.mask,.divcss-b').hide()
        // $(".mask").show();
        // $(".divcss-b").show().find('label').html(v);
        // // $(".divcss-b").show().find('label').html(v).next().click(function (){
        // //     alert(123)
        // // });
        // confirm = function(){
        //     $(".mask").hide();
        //     $(".divcss-b").hide();
        // };
        // $('.divcss-b label').html(v);
    };
    function deleteItem(){
        // alert(234);
        $('.mask,.divcss-b').hide()
        // $(".mask").show();
        // $(".divcss-b").show().find('label').html(v);
        // confirm = function(){
        //     $(".mask").hide();
        //     $(".divcss-b").hide();
        // };
    };
    // let closea = function() {
    //     console.log(!23)
    //     $(".mask").hide();
    //     $(".divcss-b").hide();
    // }
</script>